<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Hub - 个人网页导航</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='icon.png') }}">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="#">
                <i class="fas fa-link me-2"></i>
                LinkHub
            </a>
            
            <!-- 移动端菜单按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <!-- 搜索框 -->
            <div class="d-flex ms-auto me-3 flex-grow-1" style="max-width: 400px;">
                <div class="input-group">
                    <span class="input-group-text bg-light border-0">
                        <i class="fas fa-search text-muted"></i>
                    </span>
                    <input type="text" class="form-control border-0" id="globalSearch" 
                           placeholder="搜索链接..." aria-label="搜索">
                </div>
            </div>
            
            <!-- 添加新链接按钮 -->
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addLinkModal">
                <i class="fas fa-plus me-1"></i>
                添加链接
            </button>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 左侧边栏 -->
            <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-white sidebar collapse">
                <div class="position-sticky pt-5 px-3">
                    <!-- 类型过滤器 -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold text-muted mb-0">类型</h6>
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" 
                                    data-bs-target="#manageCategoriesModal">
                                <i class="fas fa-cog"></i>
                            </button>
                        </div>
                        <div id="categoriesList" class="d-flex flex-wrap gap-2">
                            <!-- 动态加载 -->
                        </div>
                    </div>

                    <!-- 标签过滤器 -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold text-muted mb-0">标签</h6>
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" 
                                    data-bs-target="#manageTagsModal">
                                <i class="fas fa-cog"></i>
                            </button>
                        </div>
                        <div id="tagsList" class="d-flex flex-wrap gap-2">
                            <!-- 动态加载 -->
                        </div>
                    </div>

                    <!-- 清除过滤器 -->
                    <button class="btn btn-sm btn-outline-secondary w-100" id="clearFilters">
                        <i class="fas fa-times me-1"></i>
                        清除过滤
                    </button>

                    <!-- 数据管理 -->
                    <hr>
                    <div class="mt-4">
                        <h6 class="fw-bold text-muted mb-3">数据管理</h6>
                        <button class="btn btn-sm btn-outline-primary w-100 mb-2" id="updateAllLinks">
                            <i class="fas fa-sync-alt me-1"></i>
                            一键更新
                        </button>
                        <button class="btn btn-sm btn-outline-info w-100 mb-2" id="exportData">
                            <i class="fas fa-download me-1"></i>
                            导出数据
                        </button>
                        <button class="btn btn-sm btn-outline-info w-100 mb-2" id="importData">
                            <i class="fas fa-upload me-1"></i>
                            导入数据
                        </button>
                        <button class="btn btn-sm btn-outline-success w-100" id="syncGit">
                            <i class="fas fa-code-branch me-1"></i>
                            同步Git
                        </button>
                        <input type="file" id="importFile" accept=".json" style="display: none;">
                    </div>
                </div>
            </nav>

            <!-- 主内容区 -->
              <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 pt-5 mt-4">
                

                <!-- 链接卡片区域 -->
                <div id="linksContainer" class="row mx-n2">
                    <!-- 动态加载链接卡片 -->
                </div>

                <!-- 空状态提示 -->
                <div id="emptyState" class="text-center py-5" style="display: none;">
                    <i class="fas fa-link fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">暂无链接</h4>
                    <p class="text-muted">点击右上角的"添加链接"开始创建您的第一个链接</p>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLinkModal">
                        <i class="fas fa-plus me-1"></i>
                        立即添加
                    </button>
                </div>
            </main>
        </div>
    </div>

    <!-- 添加/编辑链接模态框 -->
    <div class="modal fade" id="addLinkModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addLinkModalLabel">添加新链接</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="linkForm">
                        <input type="hidden" id="linkId" name="id">
                        <div class="mb-3">
                            <label for="linkName" class="form-label">名称 *</label>
                            <input type="text" class="form-control" id="linkName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="linkIcon" class="form-label">图标URL</label>
                            <input type="url" class="form-control" id="linkIcon" name="icon" 
                                   placeholder="https://example.com/favicon.ico">
                            <div class="form-text">可选：网站图标的URL地址，留空将使用默认图标</div>
                        </div>
                        <div class="mb-3">
                            <label for="linkUrl" class="form-label">URL *</label>
                            <div class="input-group">
                                <input type="url" class="form-control" id="linkUrl" name="url" required>
                                <button type="button" class="btn btn-outline-info" id="fetchSiteInfo" title="获取网站信息">
                                    <i class="fas fa-magic"></i>
                                    获取
                                </button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="linkDescription" class="form-label">描述</label>
                            <textarea class="form-control" id="linkDescription" name="description" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="linkCategory" class="form-label">类型</label>
                            <select class="form-select" id="linkCategory" name="category">
                                <option value="">选择类型...</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="linkTags" class="form-label">标签</label>
                            <select multiple class="form-select" id="linkTags" name="tags[]" 
                                   aria-label="选择标签 (按住Ctrl或Shift键可多选)" style="min-height: 40px;">
                                <!-- 动态加载标签选项 -->
                            </select>
                            <div class="form-text">按住Ctrl或Shift键可选择多个标签</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveLink">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 管理类型模态框 -->
    <div class="modal fade" id="manageCategoriesModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">管理类型</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="newCategory" placeholder="新类型名称">
                            <button class="btn btn-primary" id="addCategory">添加</button>
                        </div>
                    </div>
                    <div id="categoriesListManage">
                        <!-- 动态加载类型列表 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 管理标签模态框 -->
    <div class="modal fade" id="manageTagsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">管理标签</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="newTag" placeholder="新标签名称">
                            <button class="btn btn-primary" id="addTag">添加</button>
                        </div>
                    </div>
                    <div id="tagsListManage">
                        <!-- 动态加载标签列表 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>确定要删除这个链接吗？此操作不可撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast提示 -->
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert">
            <div class="toast-header">
                <i class="fas fa-check-circle text-success me-2"></i>
                <strong class="me-auto">提示</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body" id="toastMessage"></div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>